"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const head_1 = __importDefault(require("next/head"));
const react_1 = __importDefault(require("react"));
const editor_sdk_react_1 = require("@grammarly/editor-sdk-react");
const axios_1 = __importDefault(require("axios"));
const Editor_1 = __importDefault(require("../../../../components/Editor"));
const Home_module_css_1 = __importDefault(require("../../../../styles/Home.module.css"));
const router_1 = require("next/router");
const _3ditor_1 = require("styles/3ditor");
const theme_1 = require("styles/theme");
const parseSearch = (query) => {
    const split = query.split("&");
    const obj = {};
    split.forEach((s) => {
        const split_ = s.split("=");
        split_[0] = split_[0].replace("?", "");
        split_.shift();
        const str = split_.join("=");
        obj[split_[0]] = str;
    });
    return obj;
};
const Edit = ({ theme_, setTheme_, }) => {
    const [document, setDocument] = react_1.default.useState("");
    const [isLoading, setIsLoading] = react_1.default.useState(true);
    const [theme, setTheme] = react_1.default.useState(theme_ || "light");
    const router = (0, router_1.useRouter)();
    const docid = router.query.docid;
    // eslint-disable-next-line react-hooks/exhaustive-deps
    react_1.default.useEffect(() => {
        axios_1.default
            .get(`${window.location.protocol}//${window.location.hostname}/api/v1/editor/document/${router.query.docid}`)
            .then((resp) => {
            setDocument(resp.data.content);
            setIsLoading(false);
        })
            .catch((e) => {
            alert(`An error occured while loading the document: ${e}`);
        });
        const t = window.localStorage.getItem("theme");
        if (t) {
            setTheme(t);
            if (setTheme_)
                setTheme_(t);
        }
    });
    return (<div className={Home_module_css_1.default.container} style={{ width: "100%", height: "100%", margin: 0, padding: 0 }}>
            <head_1.default>
                <title>3ditor Demo</title>
                <meta name="description" content="3ditor: The open-source multiplatform React-based editor that powers OpenDocs."/>
                <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
                <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
                <link rel="manifest" href="/manifest.json"/>
            </head_1.default>

            <div className={Home_module_css_1.default.app} style={{
            width: "100%",
            height: "100%",
            margin: 0,
            padding: 0,
        }}>
                <_3ditor_1.GlobalEditorStyles />
                {theme == "dark" || theme == "dark-dyslexic" ? (<>
                        <_3ditor_1.DarkEditorMode />
                        <theme_1.DarkMode />
                    </>) : (<>
                        <_3ditor_1.LightEditorMode />
                        <theme_1.LightMode />
                    </>)}
                <editor_sdk_react_1.GrammarlyEditorPlugin config={{ collectUserFeedback: true }} style={{
            width: "100%",
            height: "100%",
            margin: 0,
            padding: 0,
        }}>
                    {isLoading ? (<div className="loader_container2" style={{
                display: isLoading ? "flex" : "none",
            }}>
                            <div className="loader2"/>
                        </div>) : (<Editor_1.default documentContent={document || ""} documentId={docid?.toString() || ""} theme_={theme_} setTheme_={setTheme_}/>)}
                </editor_sdk_react_1.GrammarlyEditorPlugin>
            </div>
        </div>);
};
exports.default = Edit;
//# sourceMappingURL=edit.jsx.map